<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '入住清单',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>

<template>
  <view class="content" :style="{ paddingTop: code == 0 ? '190px' : '260px' }">
    <view class="topBox">
      <view class="tab">
        <view class="tabItem" @click="code = 0">
          <view class="text" :class="{ text1: code == 0 }">查看数据</view>
        </view>
        <view class="tabItem" @click="(code = 1), getTableList()">
          <view class="text" :class="{ text1: code == 1 }">查看报表</view>
        </view>
      </view>
      <view v-if="code == 1" class="top-scearch">
        <view class="btnBox mb-[20upx]">
          <view class="icon">
            <wd-icon name="format-vertical-align-right" size="18px"></wd-icon>
          </view>
          <view class="allBtn">
            <text class="mr-[20upx]">
              <wd-button size="small" plain @click="getTableList">查询</wd-button>
            </text>
            <wd-button size="small" plain @click="resetTable">重置</wd-button>
            <!-- <text class="ml-[20upx]">
              <wd-button size="small" plain @click="getTableList">导出</wd-button>
            </text> -->
          </view>
        </view>
        <view class="formAll">
          <view class="allItem">
            <view class="w-[80upx]">时间</view>
            <view class="w-[85%]">
              <wd-datetime-picker
                type="date"
                placeholder="请选择时间"
                v-model="searchForm.createTime"
              />
              <!-- <wd-calendar type="date" placeholder="请选择时间" v-model="searchForm.date" /> -->
            </view>
          </view>
          <view class="allItem">
            <view class="w-[80upx]">公司</view>
            <view class="w-[85%] border-b">
              <wd-col-picker
                placeholder="请选择公司"
                v-model="searchForm.company"
                :columns="companyList"
                :column-change="columnChange"
                label-key="label"
                value-key="id"
              ></wd-col-picker>
              <!-- <wd-select-picker
                v-model="searchForm.company"
                :columns="companyList"
                placeholder="请选择公司"
                type="radio"
                clearable
              ></wd-select-picker> -->
            </view>
          </view>
        </view>
      </view>
      <view v-if="code == 0" class="p-[20upx] pt-[0upx]">
        <wd-search
          light
          v-model="searchVal"
          @search="getDataList"
          placeholder="请输入姓名"
          hide-cancel
          placeholder-left
        />
      </view>
      <view v-if="code == 0" class="chooseBox">
        <view class="segmented">
          <view
            class="item"
            @click="() => changeTab(item)"
            :class="{ otherItem: nowCode == item.value }"
            v-for="item in tabList"
            :key="item.value"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <view v-if="code == 0">
      <view class="cardBox" v-if="dataList.length > 0">
        <wd-card v-for="(item, index) in dataList" :key="index">
          <view>
            <template #title>
              <view class="dataTopBox mb-[20upx]">
                <view>{{ item.resideUserName }}</view>
                <view class="time">{{ item.createTime }}</view>
                <view
                  class="btnBox"
                  :class="{
                    btn1: item.resideApplyStatus == 2 || item.resideApplyStatus == 4,
                    btn2: item.resideApplyStatus == 8,
                    btn3: item.resideApplyStatus == 1,
                  }"
                >
                  {{
                    item.resideApplyStatus == 1
                      ? '审批中'
                      : item.resideApplyStatus == 2
                        ? '待分配'
                        : item.resideApplyStatus == 8
                          ? '分配完成'
                          : item.resideApplyStatus == 4
                            ? '待入住'
                            : ''
                  }}
                </view>
              </view>
            </template>
            <view class="allInfo mb-[20upx]">
              <view class="item" v-if="item.customerName">
                <view class="mr-[20upx]">客户名称:</view>
                <view>{{ item.customerName }}</view>
              </view>
              <view class="item" v-if="item.customerCompany">
                <view class="mr-[20upx]">公司名称:</view>
                <view>{{ item.customerCompany }}</view>
              </view>
              <view class="item" v-if="item.customerPhone">
                <view class="mr-[20upx]">联系电话:</view>
                <view>{{ item.customerPhone }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">出差事由:</view>
                <view>{{ item.resideCause }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">申请入住日期:</view>
                <view>{{ item.resideInDate }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">预计退房日期:</view>
                <view>{{ item.resideOutDate }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">分配宿舍:</view>
                <view>{{ item.roomName }}</view>
              </view>
            </view>
            <view class="text-right" v-if="item.resideApplyStatus != 1">
              <text class="mr-[10upx]">
                <!-- <wd-button size="small" disabled>分配宿舍</wd-button> -->
                <wd-button
                  v-if="item.resideApplyStatus == 2"
                  size="small"
                  @click="(selectItem = item), (showPop = true)"
                >
                  分配宿舍
                </wd-button>
              </text>
              <text class="mr-[10upx]" v-if="item.resideApplyStatus == 4">
                <wd-button size="small" @click="(selectItem = item), (showPop2 = true)">
                  入住确认
                </wd-button>
              </text>
              <wd-button
                v-if="item.resideApplyStatus == 8 || item.resideApplyStatus == 4"
                size="small"
                @click="(selectItem = item), (showPop3 = true)"
              >
                调换宿舍
              </wd-button>
            </view>
          </view>
        </wd-card>
      </view>
      <wd-status-tip v-else image="search" tip="暂无数据" />
    </view>
    <view v-else>
      <scroll-view scroll-x="true">
        <wd-card title="经营分析">
          <wd-table v-if="tableData.length > 0" :data="tableData" :height="400">
            <wd-table-col prop="id" label="信息编号"></wd-table-col>
            <wd-table-col prop="resideUserName" label="提交人"></wd-table-col>
            <wd-table-col prop="customerName" label="客户名称"></wd-table-col>
            <wd-table-col prop="customerCompany" label="公司名称"></wd-table-col>
            <wd-table-col prop="customerPhone" label="联系电话"></wd-table-col>
            <wd-table-col prop="resideApplyStatus" label="状态">
              <template #value="{ row }">
                {{ getStatusName(row.resideApplyStatus) }}
              </template>
            </wd-table-col>
            <wd-table-col prop="resideInDate" label="申请入住日期"></wd-table-col>
            <wd-table-col prop="resideOutDate" label="预计退房日期"></wd-table-col>
            <wd-table-col prop="dayNumber" label="入住天数"></wd-table-col>
            <wd-table-col prop="specialRequirements" label="特殊需求"></wd-table-col>
            <wd-table-col prop="stayConfirm" label="准备确认">
              <template #value="{ row }">
                {{ row.stayConfirm == 0 ? '已确认' : '未确认' }}
              </template>
            </wd-table-col>
            <wd-table-col prop="resideActInDate" label="入住日期"></wd-table-col>
            <wd-table-col prop="resideActOutDate" label="退房日期"></wd-table-col>
            <wd-table-col prop="checkConfirm" label="退房确认">
              <template #value="{ row }">
                {{ row.checkConfirm == 0 ? '已退房' : '未退房' }}
              </template>
            </wd-table-col>
          </wd-table>
          <wd-status-tip v-else image="search" tip="暂无数据" />
        </wd-card>
      </scroll-view>
    </view>
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
    <!-- 分配宿舍 -->
    <view class="oppbox">
      <wd-popup v-model="showPop" custom-style="border-radius:32rpx; width: 90%;min-height:80vh">
        <view class="p-[20upx] contentBox">
          <view class="mb-[20upx] text-[18upx]">分配宿舍</view>
          <wd-form :model="model">
            <wd-cell-group border>
              <wd-cell-group border>
                <wd-input
                  disabled
                  label="姓名"
                  label-width="60px"
                  clearable
                  v-model="selectItem.resideUserName"
                />
                <wd-select-picker
                  v-model="selectItem.baseRoomId"
                  label="分配宿舍"
                  label-width="60px"
                  :columns="hostelList"
                  placeholder="请选择宿舍"
                  type="radio"
                  clearable
                ></wd-select-picker>
              </wd-cell-group>
            </wd-cell-group>
          </wd-form>
          <view class="text-right mt-[60upx]">
            <text class="mr-[20upx]">
              <wd-button size="small" @click="sureSubmit">确认</wd-button>
            </text>
            <wd-button type="info" size="small" @click="showPop = false">取消</wd-button>
          </view>
        </view>
      </wd-popup>
    </view>
    <!-- 入住确认 -->
    <view class="oppbox">
      <wd-popup v-model="showPop2" custom-style="border-radius:32rpx; width: 90%;min-height:80vh">
        <view class="p-[20upx] contentBox">
          <view class="mb-[20upx] text-[18upx]">入住确认</view>
          <wd-form :model="model">
            <wd-cell-group border>
              <wd-cell-group border>
                <wd-input
                  disabled
                  label="姓名"
                  label-width="60px"
                  clearable
                  v-model="selectItem.resideUserName"
                />
                <wd-input
                  disabled
                  label="分配宿舍"
                  label-width="60px"
                  clearable
                  v-model="selectItem.roomName"
                />
                <wd-calendar
                  label-width="60px"
                  type="date"
                  prop="date"
                  :min-date="timeStart"
                  placeholder="请选择入住日期"
                  v-model="selectItem.resideActInDate"
                  label="入住日期"
                />
              </wd-cell-group>
            </wd-cell-group>
          </wd-form>
          <view class="text-right mt-[60upx]">
            <text class="mr-[20upx]">
              <wd-button size="small" @click="sureSubmit2">确认</wd-button>
            </text>
            <wd-button type="info" size="small" @click="showPop2 = false">取消</wd-button>
          </view>
        </view>
      </wd-popup>
    </view>
    <!-- 调换宿舍 -->
    <view class="oppbox">
      <wd-popup v-model="showPop3" custom-style="border-radius:32rpx; width: 90%;min-height:80vh">
        <view class="p-[20upx] contentBox">
          <view class="mb-[20upx] text-[18upx]">调换宿舍</view>
          <wd-form :model="model">
            <wd-cell-group border>
              <wd-cell-group border>
                <wd-input
                  disabled
                  label="姓名"
                  label-width="60px"
                  clearable
                  v-model="selectItem.resideUserName"
                />
                <wd-input
                  disabled
                  label="分配宿舍"
                  label-width="60px"
                  clearable
                  v-model="selectItem.roomName"
                />
                <wd-select-picker
                  v-model="selectItem.baseAfterRoomId"
                  label="调换宿舍"
                  label-width="60px"
                  :columns="hostelList"
                  placeholder="请选择宿舍"
                  type="radio"
                  clearable
                ></wd-select-picker>
              </wd-cell-group>
            </wd-cell-group>
          </wd-form>
          <view class="text-right mt-[60upx]">
            <text class="mr-[20upx]">
              <wd-button size="small" @click="sureSubmit3">确认</wd-button>
            </text>
            <wd-button type="info" size="small" @click="showPop3 = false">取消</wd-button>
          </view>
        </view>
      </wd-popup>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { useColPickerData } from '@/hooks/useColPickerData'
import { getDormitoryStatus } from '@/api/administration/hostelInfo.js'
import {
  getCheckInList,
  assignDormitory,
  switchDormitory,
  checkInConfirm,
  getDeptTree,
  getCheckInReport,
} from '@/api/administration/checkInList.js'
import dayjs from 'dayjs'
import { getHotelList } from '@/api/administration/hostelInfo.js'
defineOptions({
  name: 'CheckInList',
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

const timeStart = ref(dayjs(new Date().getTime()).format('YYYY-MM-DD'))
const nowCode = ref(null)
const code = ref(0)
const { colPickerData, findChildrenByCode } = useColPickerData()
// 分配宿舍
const showPop = ref(false)
// 入住确认
const showPop2 = ref(false)
const showPop3 = ref(false)
const selectItem = ref({})
const searchForm = ref({
  createTime: '',
  company: [],
})
// 宿舍列表
const hostelList = ref([])
const companyList = ref([])
const statusList = ref([])
const tabList = ref([
  {
    name: '审批中',
    value: 1,
  },
  {
    name: '待分配',
    value: 2,
  },
  {
    name: '分配完成',
    value: 8,
  },
])
const searchVal = ref('')
const scrollTop = ref(0)
const dataList = ref([])
const tableData = ref([])

onMounted(() => {
  getStatus()
  getHostelList()
  getDataList()
  getDeptTreeData()
  getTableList()
})

// 获取表格数据
const getTableList = async () => {
  const res = await getCheckInReport({
    createTime: searchForm.value.createTime
      ? dayjs(searchForm.value.createTime).format('YYYY-MM-DD')
      : '',
    deptId: searchForm.value.company[searchForm.value.company.length - 1] || '',
    pageNum: 1,
    pageSize: 10000,
  })
  tableData.value = res.data.rows || []
  console.log('searchForm', res)
}

// 重置表格
const resetTable = () => {
  searchForm.value = {
    date: '',
    company: [],
  }
}

// tab改变事件
const changeTab = (item) => {
  if (nowCode.value != item.value) {
    nowCode.value = item.value
  } else {
    nowCode.value = null
  }
  getDataList()
}

// 获取入住清单数据
const getDataList = async () => {
  const res = await getCheckInList({
    pageNum: 1,
    pageSize: 1000,
    resideUserName: searchVal.value,
    resideApplyStatus: nowCode.value || '',
  })
  dataList.value = res.data.rows || []
}

// 获取宿舍列表
const getHostelList = async () => {
  const res = await getHotelList({
    pageNum: 1,
    pageSize: 10000,
  })
  const list = res.data.rows.filter((item) => {
    return item.roomState == 1
  })
  hostelList.value = list.map((item) => {
    return {
      label: item.roomNo,
      value: item.id,
    }
  })
  console.log('hostelList.value', hostelList.value)
}

// 公司选择事件
const columnChange = ({ selectedItem, resolve, finish }) => {
  const areaData = findChildrenByCode(companyList.value[0], selectedItem.id)
  if (areaData && areaData.length) {
    resolve(areaData)
  }
  finish()
  // console.log('searchForm.company', searchForm.value)
}

// 获取宿舍状态数据
const getStatus = async () => {
  const res = await getDormitoryStatus()
  statusList.value = res.data.data || []
}

// 获取状态名称
const getStatusName = (status) => {
  console.log('statusList.value', status)

  const item = statusList.value.find((item) => {
    return item.dictValue == status
  })
  return item ? item.dictLabel : ''
}

// 分配宿舍确认
const sureSubmit = async () => {
  console.log(selectItem.value, 100)
  if (!selectItem.value.baseRoomId) {
    uni.showToast({
      title: '请选择宿舍',
      icon: 'none',
    })
    return
  }
  const res = await assignDormitory({
    ...selectItem.value,
  })
  if (res.data.code == 200) {
    uni.showToast({
      title: '分配成功',
      icon: 'none',
    })
    showPop.value = false
    getDataList()
  }
}

// 入住确认
const sureSubmit2 = async () => {
  if (!selectItem.value.resideActInDate) {
    uni.showToast({
      title: '请选择入住日期',
      icon: 'none',
    })
    return
  }
  const res = await checkInConfirm({
    ...selectItem.value,
    resideActInDate: dayjs(selectItem.value.resideActInDate).format('YYYY-MM-DD'),
  })
  if (res.data.code == 200) {
    uni.showToast({
      title: '入住确认成功',
      icon: 'none',
    })
    showPop2.value = false
    getDataList()
  }
}

// 调换宿舍
const sureSubmit3 = async () => {
  if (!selectItem.value.baseAfterRoomId) {
    uni.showToast({
      title: '请选择切换后宿舍',
      icon: 'none',
    })
    return
  }
  const res = await switchDormitory({
    ...selectItem.value,
  })
  if (res.data.code == 200) {
    uni.showToast({
      title: '调换成功',
      icon: 'none',
    })
    showPop3.value = false
    getDataList()
    getHostelList()
  }
}

// 查询部门树数据
const getDeptTreeData = async () => {
  const res = await getDeptTree()
  companyList.value = [res.data.data] || []
}
</script>

<style lang="scss" scoped>
.oppbox {
  :deep(.wd-popup) {
    background: transparent !important;
  }
}
.contentBox {
  background-color: white;
  border-radius: 16px;
}
:deep() {
  .wd-search {
    padding: 0 !important;
    width: 95vw;
  }
  .wd-input__inner {
    color: black !important;
  }
  .wd-table__header {
    z-index: 1 !important;
  }
  .cardBox {
    .wd-card__title-content {
      padding: 14upx 0upx;
    }
    .wd-card__footer {
      padding: 14upx 0upx;
    }
  }

  .is-light {
    background-color: white !important;
  }
  .wd-search__block {
    border: 1px solid #d4d3d3 !important;
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  background-color: #f1f1f1;
  padding-bottom: 30upx;
  .topBox {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: white;
    .top-scearch {
      padding: 0upx 40upx 40upx 40upx;
      .btnBox {
        // background-color: rgb(211, 211, 211);
        display: flex;
        align-items: center;
        .icon {
          width: 60upx;
          height: 60upx;
          text-align: center;
          line-height: 60upx;
          border-radius: 30upx;
          margin-right: 20upx;
          background-color: rgba(243, 240, 240, 0.8);
        }
        .allBtn {
          display: inline-block;
          padding: 10upx 40upx;
          border-radius: 40upx;
          background-color: rgba(243, 240, 240, 0.8);
        }
      }
      .formAll {
        .allItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .border-b {
            border-bottom: 1px solid #e5e5e5;
          }
        }
      }
    }

    .tab {
      display: flex;
      align-items: center;
      margin-bottom: 20upx;
      padding: 20upx;
      justify-content: space-between;
      height: 80upx;
      .tabItem {
        width: 50%;
        text-align: center;
        .text {
          display: inline-block;
          line-height: 50upx;
        }
        .text1 {
          color: #0083ff;
          border-bottom: 5upx solid #0083ff;
        }
      }
      .tabItem:first-child {
        border-right: 1px solid #d4d3d3;
      }
    }
    .chooseBox {
      background-color: #f1f1f1;
      padding: 20upx;
      .segmented {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 33%;
          height: 28px;
          border: 1px solid #4d80f0;
          text-align: center;
          line-height: 28px;
          background-color: white;
        }
        .item:last-child {
          width: 34%;
          border-top-right-radius: 6upx;
          border-bottom-right-radius: 6upx;
        }
        .item:first-child {
          border-top-left-radius: 6upx;
          border-bottom-left-radius: 6upx;
        }
        .otherItem {
          // border: none;
          background-color: #0083ff;
          color: white;
        }
      }
    }
  }
  .dataTopBox {
    display: flex;
    font-size: 32upx;
    color: black;
    justify-content: space-between;
    align-items: center;
    .time {
      color: #a9a8a8;
      font-size: 24upx;
    }
  }
  .allInfo {
    .item {
      display: flex;
      align-items: center;
      line-height: 50upx;
    }
  }
  .btnBox {
    padding: 5upx 10upx;
    display: inline-block;
    font-size: 28upx;
  }
  .btn1 {
    border: 1px solid #cf8428;
    color: #cf8428;
    border-radius: 10upx;
  }
  .btn2 {
    border: 1px solid #75c514;
    color: #75c514;
    border-radius: 10upx;
  }
  .btn3 {
    border: 1px solid #4d80f0;
    color: #4d80f0;
    border-radius: 10upx;
  }
}
</style>
